<template>
  <CKEditor :editor="editor" v-model="editorData" :config="editorConfig"></CKEditor>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { component as CKEditor} from '@ckeditor/ckeditor5-vue'
  import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'
  import GeneralHtmlSupport from '@ckeditor/ckeditor5-html-support/src/generalhtmlsupport'
  import HtmlComment from '@ckeditor/ckeditor5-html-support/src/htmlcomment'
  import SourceEditing from '@ckeditor/ckeditor5-source-editing/src/sourceediting'

  import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
  import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
  import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
  import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
  import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn'

  const editor = ClassicEditor
  const editorData = ref('<p>Content of the editor.</p>')
  const editorConfig = {
    plugins: [
      GeneralHtmlSupport,
      HtmlComment,
      SourceEditing,
      Essentials, Paragraph, Bold, Italic
    ],
    toolbar: [ 'bold', 'italic' ],
    htmlSupport: {
      allow: [
        {
          name: /.*/,
          attributes: true,
          classes: true,
          styles: true
        }
      ]
    },
    language: 'zh-cn'
  }
</script>
